<template>
  <div class="customSort">
    <el-dropdown trigger="click" @command="handleCommand">
      <span class="el-dropdown-link">
        <i class="el-icon-top" v-show="order == 'asc'"></i>
        <i class="el-icon-bottom" v-show="order == 'desc'"></i>
        {{text || '默认排序'}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          v-for="(item,index) in dropList"
          :key="index"
          :command="item.prop"
          :class="item.prop === prop_order ? 'activeDrop': ''"
        >
          <div class="drop_content">
            <div :class="prop_order ? 'drop_content_icon': ''">
              <i class="el-icon-top" v-show="item.prop === prop_order && order == 'asc'"></i>
              <i class="el-icon-bottom" v-show="item.prop === prop_order && order == 'desc'"></i>
            </div>
            <span>{{item.title}}</span>
          </div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
export default {
  name: 'CustomSort',
  props: {
    dropList: {
      type: Array,
      default() {
        return [
          {
            title: '黄金糕',
            prop: 'a',
          },
          {
            title: '狮子头',
            prop: 'b',
          },
          {
            title: '螺蛳粉',
            prop: 'c',
          },
          {
            title: '双皮奶',
            prop: 'd',
          },
          {
            title: '蚵仔煎',
            prop: 'e',
          },
        ]
      },
    },
  },
  data() {
    return {
      prop_order: null,
      order: null,
      text: null,
    }
  },
  mounted() {},
  methods: {
    handleCommand(command) {
      const dropInfo = this.dropList.find((f) => f.prop == command)
      let result = null
      if (dropInfo) {
        if (!this.prop_order || this.prop_order != command) {
          result = 'asc'
        } else if (this.order == 'desc') {
          result = null
        } else {
          result = 'desc'
        }
        this.text = result ? dropInfo.title : null
        this.prop_order = result ? command : null
        this.order = result
      }
    },
  },
}
</script>
<style lang="less" scoped>
::v-deep {
  .drop_content {
    display: flex;
    align-items: center;
    .drop_content_icon {
      width: 20px;
    }
  }
  .activeDrop {
    background-color: #ecf5ff;
    color: #66b1ff;
  }
}
</style>